import { Row, Col, Radio } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import ReactDOM from 'react-dom';
import { history } from 'umi'
import { queryRelation } from '@/services/relate'
import { RadialTreeGraph } from '@ant-design/graphs';
import { TimeHeader } from '../index/components';
import styles from './index.less';

const RelatePage = () => {
  const [mode, setMode] = useState('0');
  // const [data, setData] = useState({});
  // const [config, setConfig] = useState(null);
  const getTimeRef = useRef();
  useEffect(()=>{

  }, [])
  const data = {
    id: 'panel_root',
    children: [
      {
        id: '1',
        children: [
          {
            id: 'Models diversity',
            value: '架构研发人员的招聘',
          },
          {
            id: 'Methods',
            value: '部门研发成本统计报表',
          },
          {
            id: 'Common',
            value: '组织架构调整',
          },
        ],
        value: '研发人员重组完成100%',
        
      },
      {
        id: '2',
      
        children: [
          { id: '5-1', value: '架构研发人员的招聘' },
          { id: '5-2', value: 'UI人员配置完善' },
          {
            id: '5-3',
            value: '中台系统开发',
          },
        ],
        value: '构造公司内部的UI框架%',
      },
      {
        id: '3',
        children: [
          { id: 'Multiple linear regression', value: '年度人才成本招聘计划' },
          { id: 'Partial least squares', value: '产研部技术成本预期目标' },
          {
            id: 'Multi-layer feedforward neural network',
            value: '产研部技术文档完善执行',
          },
          { id: 'General regression neural network', value: '低代码平台搭建，公共组件开发至100%' },
          { id: 'Support vector regression', value: '微服务架构开发至100%' },
        ],
        value: '研发专业技术使用完善，达到90%',
      },
      {
        id: '4',
        children: [
          { id: '4-1', value: '公司整体组织架构重组完成' },
          { id: '4-2', value: '具备大型ERP系统经验的产品经理招聘' },
          {
            id: '4-3',
            value: '微服务架构设计与搭建',
          },
          { id: '4-4', value: '年度需求文档输出计划' },
        ],
        value: '中台系统搭建完成',
      },
      {
        id: '5',
        children: [
          // { id: 'Logistic regression', value: '微服务架构设计与搭建' },
          { id: 'Linear discriminant analysis', value: '低代码平台设计与搭建' },
          { id: 'Rules', value: '架构研发人员的招聘' },
          { id: 'Decision trees', value: '具备大型ERP系统经验的产品经理招聘' },
          { id: 'Naive Bayes', value: '部门研发成本统计报表' },
          { id: 'K nearest neighbor', value: '年度销售目标计划' },
        ],
        value: '公文实现产品化(一体化)可塑性强(输出100%)',
      },
    ],
    value: '2023年第二季度OKR',
  };
  const updateList = (year, quarter, mode = '2') => {
    if (year && quarter) {
      getData(year, quarter, mode);
    }
  }
  const getData = (year, quarter, currMode) => {
      const params = {
        type: currMode ? currMode : (mode === '0' ? '2' : '1'),
        year,
        quarter,
      }
      queryRelation(params).then((res)=>{
        if(res.code == 200) {
          const okrData =  res.data.okr;
          const newData = okrData.objectiveList.map((item, index) => {
            const relatList = item?.relationList || [];
            const newRelatList = relatList.length > 0 ? relatList.map((val,num)=>{
              return { id: val.id + '', value: {title: `关联${num+1}`, items: [
                { text: val.oname },
                { text: '进度', value: val.oprogress || 0 }
              ] } }
            }) : []
            return {
              id: item.id + '', 
              value: {
                title: `O${index+1}`, 
                items: [
                  { text: item.oname },
                  { text: '进度', value: item.oprogress || 0 }
                ],
              },
              children: newRelatList,
            }
          })
          const newDataRelate = {
            id: okrData.id + '',
            value: {
              title: '当前OKR',
              items: [
                {
                  text: '负责人',
                  value: okrData.username,
                },
              ],
            },
            children: newData,
          }
          // setData(newDataRelate)
        }
      })
  }
  const integratData = (list) => {
   
  }
  const changeMode = (e) => {
    const val = e.target.value
    setMode(e.target.value);
    const { year } = getTimeRef.current;
    getTimeRef.current.getQuarterFun(year, val, '');
  }
const config = {
  nodeCfg: {
    type: 'diamond',
  },
  layout: {
    type: 'compactBox',
    direction: 'RL',
    getId: function getId(d) {
      return d.id;
    },
    getHeight: () => {
      return 26;
    },
    getWidth: () => {
      return 26;
    },
    getVGap: () => {
      return 20;
    },
    getHGap: () => {
      return 30;
    },
    radial: true,
  },
  behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
  data,
};
return (
     <div className={styles.relate_wrap}>
      <TimeHeader 
        updateList={updateList}
        ref={getTimeRef}
      />
       <Radio.Group
            onChange={changeMode}
            value={mode}
            style={{ marginBottom: 8 }}
          >
        <Radio.Button value="0">部门OKR</Radio.Button>
        <Radio.Button value="1">个人OKR</Radio.Button>
      </Radio.Group>
      <RadialTreeGraph {...config}></RadialTreeGraph>
     </div>
);
};
export default RelatePage